<script setup lang='ts'>
import {useCounterStore} from '@/stores/users'
import { Notify } from 'vant';
//引入ref
import { ref } from 'vue'
// 引入路由
import {useRouter} from 'vue-router'
// 使用路由
const router =useRouter()
// 使用store
const userStore=useCounterStore();
const tel =ref('')
// 正则验证手机号码
const pattern=/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/
const onSubmit =async  (values:{tel:string}) =>{
   try {
      await userStore.checkPhoneHandler(values)
      router.push('/register/step2')
      
   } catch {
      Notify("手机号已经注册过了")
   }
}
</script>
<template>
   <van-form @submit="onSubmit" validate-trigger="onChange">
       <van-cell-group inset>
           <van-field v-model="tel" name="tel" label="请输入手机号" placeholder="请输入手机号码"
               :rules="[{ required: true, message: '请填写手机号码' }, { pattern, message: '输入手机号错误' }]" />
       </van-cell-group>
       <div style="margin: 16px;">
           <van-button round block type="danger" native-type="submit">
               下一步
           </van-button>
       </div>
   </van-form>
</template>
<style scoped lang='scss'>
 .van-form{
   margin-top: 60px;
 }
</style>